<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .box1{
      margin: 100px auto;
      width: 200px;
      height: 200px;

    }
    .box1 img{
      display: block;
      margin: 100px auto;
      width: 100%;
      height: 100%;
      transform:  rotate(30deg)
    }
    /*.box1 img:hover{
    !*rotate(90deg) scale(2)*!
      transform:  rotate(90deg) ;!*translate(14px,15px);*!
      transform-origin: bottom;
    }*/
    .box2{
      margin: 100px auto;
      height: 50px;
      width: 100px;
      background-color: pink;
      transform: skew(30deg,-10deg);
    }
    ul.polar{
      margin-left: 120px;
    }
    ul.polar li{
      display: inline;
    }
    ul.polar a{
      background: #fff;
      display: inline;
      float: left;
      width: auto;
      padding: 10px 10px 10px;
      margin: 0 0 27px 30px;
      text-align: center;
      text-decoration: none;
      color: #333;
      box-shadow: 0 3px 6px rgba(0,0,0,.5);
    }
    ul.polar img{
      display: block;
      height: 140px;
      margin-bottom: 12px;

    }
    ul.polar a:after{
      content: attr(title);

    }
    ul.polar li:nth-child(1) a{
      transform-origin: 0 0;
      transform: rotate(40deg);
    }
    ul.polar li:nth-child(2) a{
      transform-origin: top right;
      transform: rotate(-40deg);
    }

    .stage{
      width: 300px;
      height: 300px;
      float: left;
      margin: 15px;
      position: relative;
      background: #2c7ee1;
      prespective:1200px;
      -webkit-perspective: 1200px; /* Safari 和 Chrome */
    }
    .content{
      position: absolute;
      top: 50%;
      left:50%;
      transform-style: preserve-3d;
    }
    .content img{
      position: absolute;
      margin-left: -80px;
      margin-top: -100px;
    }
    .content img:nth-child(1){
      z-index: 1;
      opacity:.6;
    }
    .content img:nth-child(2) {
      z-index: 2;
      transform:translate3d(30px,30px,200px);
    }

    p{
      background: #f4a9ab;
    }

    p:hover{
      background: #b0e8fc;
     /* transition-property:background ;
      transition-duration: 2s;
      transition-delay: 1s;*/

      transition:background 2s  ease-out 5s;
    }

    #sport{
      position: relative;
      width: 500px;
      height: 400px;
      border: 1px solid #ddd;
    }

    #staff{
      position: absolute;
      z-index: 3;
      bottom: 10px;
      left:10px;
      overflow: hidden;
      width: 180px;
      height: 8px;
      border-radius: 3px;
      background: #ddd;
      line-height: 20px;
      animation: staff 3s linear 0s 5 backwards;
    }
    #ball{
      position: absolute;
      z-index: 3;
      bottom: 20px;
      left:90px;
      overflow: hidden;
      width: 30px;
      height: 30px;
      border-radius:15px;
      box-shadow:0 0 10px rgba(204,102,0,.8);
      background: #f6d66e;
      background: -moz-linear-gradient(top,#fff,#f6d66e);
      background: -webkit-linear-gradient(top,#fff,#f6d66e);
      background: -o-linear-gradient(top,#fff,#f6d66e);
      background: -ms-linear-gradient(top,#fff,#f6d66e);
      background: linear-gradient(top,#fff,#f6d66e);
      line-height: 20;
      animation:ball 3s linear 0s 5;
    }

    @keyframes ball {
      0%{
        transform:translate(0,0)
      }
      5%{
        transform: translate(-90px,-100px);
      }
      18%{
        transform: translate(0,-350px);
      }
      35%{
        transform: translate(200px,0);
      }
      46%{
        transform: translate(380px,-160px);
      }
      60%{
        transform: translate(250px,-350px);
      }
      78%{
        transform: translate(60px,0);
      }
      100%{
        transform: translate(0,0);
      }

    }

    @keyframes staff {
      0%{
        transform:translate(0,0)
      }
      6%{
        transform: translate(260px,0);
      }
      20%{
        transform: translate(300,0);
      }
      30%{
        transform: translate(300px,0);
      }
      40%{
        transform: translate(200px,0);
      }
      65%{
        transform: translate(40px,0);
      }
      79%{
        transform: translate(0,0);
      }
      100%{
        transform: translate(0,0);
      }

    }


  </style>
</head>
<body>





<div id="sport">
  <span id="ball">弹球</span>
  <span id="staff">滑块</span>
</div>



<div>
  <p>白日依山尽，黄河入海流</p>
  <p>欲穷千里目，更上一层楼</p>

</div>
<div class="stage s1">
 <div class="content">
   <img src="img/gj.jfif" alt="" width="100">
   <img src="img/gj.jfif" alt=" " width="100">
 </div>
</div>







  <div class="box1">
    <img src="img/gj.jfif" alt="">
  </div>

<div class="box2">

</div>

  <ul class="polar">
    <li><a href="" title="gfj"> <img src="img/logo.png" alt=""></a></li>
    <li><a href="" title="gj"><img src="img/gj.jfif" alt=""></a></li>
  </ul>

</body>
</html>
